<style scoped>
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.video-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-top: 20px;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例并覆盖整个容器 */
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>

<template>
  <div id="window3">

    <!-- 头部：标题 -->
    <div style="padding: 5px">
      <el-row>
        <!--        标题-->
        <el-col :span="13" style="text-align: right;">实时监控统计</el-col>
        <!--        关闭按钮-->
        <el-col :span="11" style="text-align: right;">
          <div>
            <el-popconfirm title="是否关闭该窗口" @confirm="closeWindow">
              <template #reference>
                <el-icon>
                  <CircleClose/>
                </el-icon>
              </template>
            </el-popconfirm>
          </div>
        </el-col>
      </el-row>
    </div>


    <!--      主体：存放视频-->
    <!--      采用轮播方式-->
    <!--      <el-carousel indicator-position="outside">-->
    <!--        <el-carousel-item v-for="item in 3" :key="item">-->
    <!--          <video controls class="video" style="width: 100%; height: 100%;">-->
    <!--            <source src="../assets/x.mp4" type="video/mp4">-->
    <!--          </video>-->
    <!--        </el-carousel-item>-->
    <!--      </el-carousel>-->
    <!--      只有一个视频-->
    <div class="video-container">
      <!-- 使用 video 标签来引入视频 -->
      <video controls class="video" style="margin:10px;width: 95%">
        <source :src="externalVideoUrlMP4" type="video/mp4">
        <source :src="externalVideoUrlWebm" type="video/webm">
        <source :src="externalVideoUrlOgg" type="video/ogg">
      </video>
    </div>
      </div>
</template>


<script setup>

import {defineEmits, ref} from 'vue'
const externalVideoUrlMP4 = "https://";
const externalVideoUrlWebm = "https://";
const externalVideoUrlOgg = "https://";

const emit = defineEmits()

const closeWindow = () => {
  emit('closeWindow')
}
ref(false);

</script>